<script setup>
  import country_code from '@/utils/countryCodeAndPhoneCode.json'
  import AppBar from '@/components/app-bar/app-bar.vue'
  import { onMounted, ref } from 'vue'
  import { useStore } from 'vuex'
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()
  const store = useStore()

  const emit = defineEmits(['closeCode'])
  defineProps({
    showCountry: {
      type: Boolean,
      default: false
    }
  })

  const backSet = () => {
    emit('closeCode')
  }
  const code = ref('')
  const codeList = ref([])
  const inputCode = () => {
    queryName(code.value)
  }
  const queryName = (code) => {
    codeList.value = []
    country_code.map((item) => {
      if (item.phone_code.match(code)) {
        codeList.value.push(item)
      }
    })
  }

  const chooseCode = (e) => {
    store.commit('set_area', e.phone_code)
    emit('closeCode')
  }
  onMounted(() => {
    queryName()
  })
</script>
<template>
  <transition name="slide-fade-left">
    <div v-if="showCountry" class="country">
      <app-bar :else-back="true" @back-set="backSet">
        <template #title>{{ t('countryCode.title') }}</template>
      </app-bar>
      <div class="country-seach flex-center">
        <van-icon class="icon" name="search" />
        <input
          v-model="code"
          class="box flex_1"
          type="number"
          :placeholder="t('countryCode.tips')"
          @input="inputCode()"
        />
      </div>
      <div class="country-content">
        <div
          v-for="(row, i) in codeList"
          :key="i"
          class="item flex-center-between"
          @click="chooseCode(row)"
        >
          <div>{{ row.english_name }}</div>
          <div>{{ row.phone_code }}</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<style lang="scss" scoped>
  .country {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background: #000000;
    padding-top: 45px;
    &-seach {
      margin: 15px;
      background: #1c1c1c;
      border-radius: 5px;
      line-height: 35px;
      .icon {
        margin: 0 15px;
        font-size: 24px;
        color: #8f9195;
      }
      .box {
        height: 35px;
        line-height: 35px;
      }
    }
    &-content {
      height: calc(100vh - 45px - 30px - 35px);
      overflow-y: scroll;
      .item {
        padding: 15px;
      }
    }
  }
</style>
